<template>
    <div>
        <video id="videoElement" controls autoplay muted width="1024" height="768">
        </video>
    </div>
</template>

<script setup lang="ts" name="live">

import flvjs from 'flv.js'
import {getLive} from "/@/api/evaboxcloud/deviceMonitor";

const route = useRoute();
const flvPlayer = ref();
const deviceName = ref();

onMounted(() => {
    deviceName.value = route.query.deviceName;
    getLive(deviceName.value).then((res) => {
        initPlayer(res.data);
    })
});

onUnmounted(() => {
    destroyPlayer();
});

const initPlayer = (liveUrl: string) => {
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        flvPlayer.value = flvjs.createPlayer({
            type: 'flv',
            isLive: true,
            hasAudio: false,
            url: liveUrl
        });
        if (videoElement instanceof HTMLMediaElement) {
            flvPlayer.value.attachMediaElement(videoElement);
            flvPlayer.value.load();
            flvPlayer.value.play();
        }
    }
};

const destroyPlayer = () => {
    flvPlayer.value.destroy();
};

</script>

<style scoped>

</style>